<template>
	<view class="container">
		<u--form :labelStyle="{fontSize: '28rpx', color: '#312C2A', height: '80rpx'}" labelWidth="100"
			labelPosition="left" :model="model" :rules="rules" ref="form1" errorType="toast">
			<view class="form">
				<u-form-item label="收货人" prop="name" borderBottom>
					<u--input inputAlign="right" placeholder="输入收货人姓名" v-model="model.name"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="电话号码" prop="name" borderBottom>
					<u--input type="number" maxlength="11" inputAlign="right" placeholder="请输入11位手机号码" v-model="model.name"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="选择省市区" prop="name" borderBottom >
					<u--input v-model="model.name" disabled placeholder="请选择" inputAlign="right"
						disabledColor="transparent" border="none"></u--input>
					<template #right>
						<u-icon name="arrow-right" @click="showAddressPop"></u-icon>
					</template>
				</u-form-item>
				
				<u-form-item label="详细地址" prop="name" borderBottom>
					<u--input inputAlign="right" placeholder="请输入详细地址" v-model="model.name" border="none"></u--input>
				</u-form-item>
			</view>
			
			<view class="form shadow" style="margin-top: 30rpx;">
				<u-form-item label="设为默认地址" prop="name" :borderBottom="false" >
					<view class="self-set">
						<u-switch activeColor="#516DDB" v-model="model.self" ></u-switch>
					</view>
				</u-form-item>
			</view>
		</u--form>
	</view>
	
	<view class="btn">
		<u-button throttleTime="1000" :customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="confirm">保存</u-button>
	</view>
	
	<!-- 地址三级联动 -->
	<!-- 省市区选择 province city area初始省市区设置 show:是否显示  @changeClick：更改省市区事件 @sureSelectArea：确认事件 @hideShow：隐藏事件-->
	<cc-selectDity :province="province" :city="city" :area="area" :show="addressPop" @changeClick="changeClick" @sureSelectArea="addressPop = false" @hideShow="addressPop = false"></cc-selectDity>
	
</template>

<script setup>
	const model = ref({
		name: '',
		self: false
	})
	const actions = ref([{
			name: '男'
		},
		{
			name: '女'
		},
	])
	const rules = ref({
		name: [{
			required: true,
			message: '请输入手机号',
			trigger: ['change'],
		}, ]
	})
	const sexSelect = (e) => {
		model.value.name = e.name
	}
	const confirm = () => {
		uni.navigateBack()
	}
	
	// 地址选择
	const addressPop = ref(false)
	const province = ref('')
	const city = ref('')
	const area = ref('')
	const showAddressPop = () => {
		console.log(111);
		addressPop.value = true
	}
	// 获取省市区
	const changeClick = (province, city, area) => {
		console.log(province, city, area);
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 50rpx 26rpx;
		.form {
			padding: 0 44rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
		}
	}
	.self-set {
		@include end(100%);
	}
	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 9;
	}
	.shadow {
		box-shadow: 0rpx 0rpx 30rpx 1rpx rgba(153,153,153,0.16);
	}
</style>